<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useAudioStore } from "@/stores";
import { getMusicListDetail, getMusicListAll } from "@/apis/musicList";
import { useCookieStore } from "@/stores";
import MusicListDetail from "./components/MusicListDetail.vue";
import LgtMusicCard from "@/components/LgtMusicCard/LgtMusicCard.vue";
import LgtControl from "@/components/LgtControl/LgtControl.vue";
import LgtActiveMusicList from '@/components/LgtActiveMusicList/LgtActiveMusicList.vue'

const audioStore = useAudioStore();
const cookieStore = useCookieStore();
const listId = ref(0);

// 获取歌单详情
const listDetail = ref([]);
const getMusicListDetailData = async (id) => {
  const data = await getMusicListDetail(id);
  listDetail.value = data;
};

// 获取歌单内的所有歌曲
const allMusicLsit = ref([]);
const privileges = ref([]);
const getMusicListAllData = async (id) => {
  const data = await getMusicListAll({
    id,
    limit: 30,
    offset: allMusicLsit.length,
    cookie: cookieStore.cookie.cookie,
  });
  privileges.value = data.privileges;
  allMusicLsit.value = data.songs;
};

onLoad(async (query) => {
  uni.showLoading({
    title: "加载中...",
  });
  listId.value = query.id;
  await getMusicListDetailData(query.id);
  await getMusicListAllData(query.id);
  uni.hideLoading();
});

const playMisic = (e) => {
  audioStore.playIndex = e.index;
  audioStore.getMusicUrlData(e.id);
  audioStore.activeMusicList = allMusicLsit.value;
  audioStore.privileges = privileges.value;
};

const popup = ref(null);
const popupStatus = ref(false);
const openPlayList = () => {
  popup.value.open();
};

const popupChange = (e) => {
  popupStatus.value = e.show;
};
</script>

<template>
  <view class="music-list">
    <view class="view-cotainer">
      <MusicListDetail :detail="listDetail.playlist" />
      <lgt-music-card
        :music="item"
        :index="index"
        :privilege="privileges[index]"
        v-for="(item, index) in allMusicLsit"
        :key="item.id"
        @play="playMisic($event)"
      >
      </lgt-music-card>
    </view>

    <uni-popup ref="popup" type="bottom" @change="popupChange($event)">
      <LgtActiveMusicList :status="popupStatus" />
    </uni-popup>
    <lgt-control class="control-postion"  @openPlayList="openPlayList"></lgt-control>
  </view>
</template>

<style lang="scss">
.music-list {
  .view-cotainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100rpx;
    overflow: auto;
  }
  .control-postion {
    position: absolute;
    bottom: 0rpx;
    left: 0;
    right: 0;
  }
}
</style>
